<template>
    <div>
        <el-card shadow="hover" v-for="(item,index) in dataList" :key="item.groupId" style="margin-top:10px;position:relative;">
            <div style="font-weight:bold">
                {{item.eventName}}
            </div>

            <div class="ipt-wrap">

                <div class="item-wrap" v-for="children in item.eventSurgeryDetailList" :key="children.eventId">
                    <div class="label">{{children.eventName}}：</div>
                    <div class="value">
                        <el-input @change="handleChange" v-if="children.component=='input'" v-model="children.value"  :placeholder="children.eventName" />
                        <el-date-picker
                            v-model="children.value"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            @change="handleChange"
                            v-if="children.component=='datetime'"
                            type="datetime"
                            placeholder="请选择"
                        />
                        <el-select @change="handleChange" style="width:200px" v-if="children.component=='select'" v-model="children.value" placeholder="请选择">
                            <el-option
                                v-for="childrenInner in children.children"
                                :key="childrenInner.eventId"
                                :label="childrenInner.eventName"
                                :value="childrenInner.eventId+''"
                            />
                        </el-select>
                    </div>
                </div>

            </div>

            <div class="del-wrap">
               <el-popover :visible="item.visible" trigger="click" placement="top">
                <div>确定删除?</div>
                <div style="text-align: right; margin: 0">
                  <el-button size="small" text @click="item.visible = false">取消</el-button>
                  <el-button @click="delItem(item,index)" size="small" type="primary">
                    确定
                  </el-button>
                </div>
                <template #reference>
                 <el-button @click="item.visible=true" type="danger" link>
                    删除
                  </el-button>
                </template>
              </el-popover>
              
            </div>

        </el-card>

        <el-row style="margin-top:10px">
          <el-col :span="24">
            <el-button type="primary" style="width:100%" plain @click="addItem">新增</el-button>
          </el-col>
          <!-- <el-col :span="12">
            <el-button type="primary" style="width:100%" >保存</el-button>
          </el-col> -->
        </el-row>
    </div>
  </template>
  
  <script setup name="templateone">
    import { v4 as uuidv4 } from 'uuid';
    import useSurgeryingStore from '@/store/modules/surgerying'
    import { delSurgeryevent} from "@/api/manage/eventsurgery";
import { onMounted } from 'vue';
    const props = defineProps({
      dataListProps: {
          type: Object,
          default: []
      },
      templateInfo:{
        type:Object,
        default:{}
      }
  })

  
  const { proxy } = getCurrentInstance();


  const loading = ref(true);

  const dataList = ref([]);
  watch(() => props.dataListProps, value => {
    initDataList()
  })
  initDataList()

  function initDataList(){
    if(props.dataListProps.length==0){
     // addItem()
    }else{
      dataList.value=props.dataListProps
    }
  }
  


  function addItem(){
    dataList.value.push({
      local:true,
      startTime:'',
      endTime:'',
      surgeryId:useSurgeryingStore().getSurgerying.surgeryId,
      eventId:props.templateInfo.eventId,
      eventName:props.templateInfo.eventName,
      eventSurgeryDetailList:props.templateInfo.children.map(item=>{
        return {
          component:item.component,
          eventName:item.eventName,
          eventId:item.eventId,
          surgeryId:item.surgeryId,
          value:item.value
        }
      })
    })
  }

  function delItem(item,index){
    if(item.local){
      dataList.value.splice(index,1)
    }else{
     let eventIds=item.eventSurgeryDetailList.map(item=>{
      return item.eventSurgeryId
     })
     delSurgeryevent(eventIds).then(res=>{
      dataList.value.splice(index,1);
      proxy.$modal.msgSuccess("删除成功");
      handleChange();
     })
    }
    
  }


  function handleChange(){
    console.log(dataList.value)
    for(let i=0;i<dataList.value.length;i++){
      for(let j=0;j<dataList.value[i].eventSurgeryDetailList.length;j++){
        dataList.value[i].eventSurgeryDetailList[j].surgeryId=useSurgeryingStore().getSurgerying.surgeryId;
      }
    }
    
    useSurgeryingStore().setEditingSurgery(dataList.value);
  }


  onMounted(()=>{
    
  })

  
  </script>

<style lang="scss" scoped>

  .del-wrap{
    position:absolute;
    right:10px;
    top:34px;
  }
  .ipt-wrap{
    display:flex;
    margin-top:10px;
    .item-wrap{
        margin-right:4px;
        display:flex;
        align-items:center;
    }
  }

</style>
  